<template>
  <div></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

const gui = new dat.GUI();

//创建一个场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

//添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
const sphereMaterial = new THREE.MeshStandardMaterial();
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
scene.add(sphere);

//添加平面
const planGeometry = new THREE.PlaneGeometry(10, 10);
const planMaterial = new THREE.MeshStandardMaterial({
  side: THREE.DoubleSide,
});
const plane = new THREE.Mesh(planGeometry, planMaterial);
plane.position.set(0, -2, 0);
plane.rotation.x = Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);

//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

//添加直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 0);
directionalLight.castShadow = true;
scene.add(directionalLight);

const f = gui.addFolder("directionalLight");
f.add(directionalLight.position, "x").min(0).max(10).step(0.1);
f.add(directionalLight.position, "y").min(0).max(10).step(0.1);
f.add(directionalLight.position, "z").min(0).max(10).step(0.1);
f.open();

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

//渲染场景
function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();
</script>
